<script setup lang="ts">
import {defineComponent, h, onMounted, ref, watch} from "vue";
import {useStore} from "@/store/user";
import {download} from "@/api/user";
import Test from "@/views/Test.vue";
import Test3 from "@/views/Test3.vue";

const testRef = ref()
const useUser = useStore()
onMounted(() => {
  useUser.init()
})
const count = ref(0);
watch(count,(n, o) => {
  console.log("count变化了,从 " + o + " 变为 " + n);
})
const changeCount = () => {
  count.value++
}
const configTable = [
  {
    label: "姓名",
    prop: "name",
    width: "100px"
  },
  {
    label: "年龄",
    prop: "age",
    width: "100px"
  },
  {
    label: "地址",
    prop: "address",
    width: "100px"
  }
]
// console.log({...{name:'小唐'},...{age:18}})
const abc = () => {
  return h('div','哈哈哈哈')
}

const downloadFile = async() => {
  await download()
}

onMounted(() => {
  const aaa = document.getElementsByClassName('index-a');
  console.log(aaa[0].innerHTML)
})

const myobj = {
  name:'小唐',
  age:18
}

const options = [{
  label:'admin',
  value:'adminVal',
},
    {
      label:'editor',
      value:'editorVal',
    },

]
const optionVal = ref()
const flag = ref(true)

watch(optionVal,  n => flag.value = n !== 'adminVal')



function debounce<T extends (...args: any[]) => any>(
    func: T,
    wait: number,
    immediate = false
): (...args: Parameters<T>) => void {
  let timeout:any = null;

  return function(...args: Parameters<T>) {
    const context = this;

    clearTimeout(timeout);
    if (immediate ) {
      func.apply(context, args);
    }
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}
let i = ref(1);
const testDebounce = debounce(() => {
    console.log('debounce' + i.value)
  },1000)
const addI = () => {
  i.value++
}
watch(i, (n, o) => {
  testDebounce()
})

const abcd = defineComponent({
  setup() {
    return () =>  h('div',{}, 'abc')
  }
})

const clickSlot = () => {
  console.log('clickSlot')
}
</script>

<template>
  <span>欢迎来到小唐的系统123131111haha</span>

  <div class="test" ref="testRef" v-permission="'admin'" >123</div>
  <el-button @click="changeCount">点击{{count}}</el-button>
  <abc></abc>
  <el-button type="primary" @click="downloadFile">下载</el-button>
  <div class="index-a">我看看能不能操作dom</div>

  <select v-model="optionVal" >
    <option v-for="item in options" :value="item.value">{{item.label}}</option>
  </select>
  <div class = "test-scss">选中了：{{optionVal}}</div>

  <input  type="text" :value="i" >

  <el-button type="primary" @click="addI">测试防抖</el-button>
  <test>
    <template #default="{msg}">
      <div>{{msg}}1</div>
      <div>
        <button @click="clickSlot">测试插槽</button>
      </div>
    </template>

  </test>
  <abcd></abcd>
  <el-input
      style="width: 240px"
      size="large"
      placeholder="Please Input"
  >
    <template #prefix>
      <span>1123</span>
    </template>
    <template #suffix>
      <span>haha</span>
    </template>
    <template #prepend>
      lalala
    </template>
    <template #append>
      lalala
    </template>
  </el-input>

  <Test3></Test3>
</template>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.test-scss {
  color: $red-color
}
</style>